import classNames from 'classnames';
import { format } from 'date-fns';

import { useNavigate } from 'react-router-dom';
import Button from 'src/component/Button';
import { Page } from 'src/constant/Page';
// import { Fill } from 'src/model/Order';
import { bnFormat } from 'src/util/bigNumber';
import style from './OrderAllCard.module.scss';

type Fill = any

type Props = {
    data?: Fill[];
};
const OrderAllCard = ({ data }: Props) => {

    const navigate = useNavigate();

    const elementMapFunction = (order: Fill) => (
        <div key={order.FID}>
            <div className={style.self}>
                <div className={style.item}>
                    <div className={style.label}>订单编号</div>
                    <div className={style.value}>{order.FID}</div>
                </div>
                <div className={style.item}>
                    <div className={style.label}>时间</div>
                    <div className={style.value}>
                        {format(Date.parse(order.FAddtime), 'yyyy/MM/dd HH:mm:ss')}
                    </div>
                </div>
                <div className={style.item}>
                    <div className={style.label}>数量</div>
                    <div className={style.value}>
                        {`${bnFormat(order.FQuantity)} ${"USDT"}`}
                    </div>
                </div>
                <div className={style.item}>
                    <div className={style.label}>单价</div>
                    <div className={style.value}>
                        {/* {`${bnFormat(order.FPrice)} ${"CNY"}`} */}
                        {`${order.FPrice} ${"CNY"}`}
                    </div>
                </div>
                <div className={style.item}>
                    <div className={style.label}>收款金额</div>
                    <div className={style.value}>
                        {`${bnFormat(order.FCNY)} ${"CNY"}`}
                    </div>
                </div>
                <div className={classNames(style.item, style.other)}>
                    <div className={style.item}>
                        <div className={style.label}>状态</div>
                        <div className={style.value}>
                            <div className={style.status}>
                                {order.FState}<br />
                                {order.FReason ? order.FReason : ""}
                            </div>
                        </div>
                    </div>
                    <Button appearance="text" onClick={() => navigate(Page.Order + '/' + order.FID, {
                        state: {
                            ...order,
                        },
                    })}>
                        详情
                    </Button>
                </div>
            </div>
            <div className={style.divider} />
        </div>
    );

    return <div>{data?.map(elementMapFunction)}</div>;
};

export default OrderAllCard;
